<template>
  <div>
    <el-form style=" align-items: center; gap: 16px; margin-bottom: 20px;">
    <el-input v-model="filters.careItemName" placeholder="护理项目名称" class="filter-input" @input="handleFiltersChange" style="margin-left: 16px; width: 150px;"></el-input>
    <el-input v-model="filters.careItemCode" placeholder="护理项目编号" class="filter-input" @input="handleFiltersChange" style="margin-left: 16px; width: 150px;"></el-input>
    <!-- 根据级别状态筛选数据 -->
    <el-select v-model="filters.careItemStatus" placeholder="项目状态" class="careItem-select" @change="handleFiltersChange" style="margin-left: 16px">
      <el-option label="启用" value="1" />
      <el-option label="停用" value="0" />
    </el-select>

    <el-button type="primary" style="margin-left: 16px" @click="addCareItem">添加</el-button>
    </el-form>

    <!--添加护理项目对话框-->
    <el-dialog title="添加护理项目" v-model="addDialogVisible" width="30%">
      <el-form :model="addDialogData" label-width="120px">
        <el-form-item label="护理项目编号" required>
          <el-input v-model="addDialogData.careItemCode"></el-input>
        </el-form-item>
        <el-form-item label="护理项目名称" required>
          <el-input v-model="addDialogData.careItemName"></el-input>
        </el-form-item>
        <el-form-item label="护理项目价格" required>
          <el-input v-model="addDialogData.careItemPrice"></el-input>
        </el-form-item>
        <el-form-item label="护理项目周期" required>
          <el-input v-model="addDialogData.careItemCycle"></el-input>
        </el-form-item>
        <el-form-item label="护理项目数量" required>
          <el-input v-model="addDialogData.careItemCount"></el-input>
        </el-form-item>
        <el-form-item label="护理项目描述">
          <el-input v-model="addDialogData.careItemDescription"></el-input>
        </el-form-item>
        <el-form-item label="护理项目状态" required>
          <el-select v-model="addDialogData.careItemStatus" placeholder="请选择">
            <el-option label="启用" value="true"></el-option>
            <el-option label="停用" value="false"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddCareItem">确 定</el-button>
      </div>
    </el-dialog>



    <!--  护理项目列表  -->
    <el-table :data="arr" stripe border>
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="careItemCode" label="护理项目编号"/>
<!--      <el-table-column prop="careItemStatus" label="护理项目状态" />-->
      <el-table-column prop="careItemStatus" label="护理项目状态" width="150">
        <template #default="{ row }">
          <!-- 使用条件渲染显示不同的标签 -->
          <el-tag
              :type="row.careItemStatus ? 'success' : 'danger'"
              style="cursor: pointer;"
          >
            {{ row.careItemStatus ? '启用' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="careItemName" label="护理项目名称"/>
      <el-table-column prop="careItemPrice" label="护理项目价格"/>
      <el-table-column prop="careItemCycle" label="护理项目周期"/>
      <el-table-column prop="careItemCount" label="护理项目数量"/>
      <el-table-column prop="careItemDescription" label="护理项目描述" width="200"/>
      <el-table-column label="操作">
        <template #default="{ row, rowIndex }">
          <el-button size="small" type="warning" @click="editCareItem(row)">修改</el-button>
          <el-button size="small" type="danger" @click="removeCareItem((row.careItemId))">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 护理项目列表分页 -->
    <div class="pagination-container" style="margin-top: 20px; display: flex; justify-content: left;">
      <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="careItemPagination.total"
          v-model:current-page="careItemPagination.current"
          v-model:page-size="careItemPagination.size"
          :page-sizes="[2, 10, 20, 50]"
          @current-change="handleCareItemPageChange"
          @size-change="handleCareItemSizeChange"
      />
    </div>


    <!--修改护理项目对话框-->
    <el-dialog title="修改护理项目" v-model="editDialogVisible" width="30%">
      <el-form :model="editDialogData" label-width="120px">
        <el-form-item label="护理项目编号">
          <el-input v-model="editDialogData.careItemCode" disabled></el-input>
        </el-form-item>
        <el-form-item label="护理项目名称" required>
          <el-input v-model="editDialogData.careItemName"></el-input>
        </el-form-item>
        <el-form-item label="护理项目价格" required>
          <el-input v-model="editDialogData.careItemPrice"></el-input>
        </el-form-item>
        <el-form-item label="护理项目周期" required>
          <el-input v-model="editDialogData.careItemCycle"></el-input>
        </el-form-item>
        <el-form-item label="护理项目数量" required>
          <el-input v-model="editDialogData.careItemCount"></el-input>
        </el-form-item>
        <el-form-item label="护理项目描述">
          <el-input v-model="editDialogData.careItemDescription"></el-input>
        </el-form-item>
        <el-form-item label="护理项目状态" required>
          <el-select v-model="editDialogData.careItemStatus" placeholder="请选择">
            <el-option label="启用" value="true"></el-option>
            <el-option label="停用" value="false"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditCareItem">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, inject, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'


// 护理项目列表分页功能
const careItemPagination = reactive({ current: 1, size: 10, total: 0 })
function handleCareItemPageChange(p) {
  careItemPagination.current = p; init()
}
function handleCareItemSizeChange(s) {
  careItemPagination.size = s; careItemPagination.current = 1; init()
}



// 添加护理项目
const addDialogVisible = ref(false)   // 添加对话框是否显示
const addDialogData = reactive({     // 添加对话框单向绑定的数据对象
  careItemCode: '', // 护理项目编号
  careItemName: '', // 护理项目名称
  careItemPrice: '', // 护理项目价格
  careItemCycle: '', // 护理项目周期
  careItemCount: '', // 护理项目数量
  careItemDescription: '', // 护理项目描述
  careItemStatus: true // 护理项目状态，默认为启用
});
// 点击添加按钮所触发的事件
function addCareItem() {
  addDialogData.careItemCode = ''; // 护理项目编号
  addDialogData.careItemName = ''; // 护理项目名称
  addDialogData.careItemPrice = ''; // 护理项目价格
  addDialogData.careItemCycle = ''; // 护理项目周期
  addDialogData.careItemCount = ''; // 护理项目数量
  addDialogData.careItemDescription = ''; // 护理项目描述
  addDialogData.careItemStatus = true?'启用':'停用'; // 护理项目状态，默认为启用
  addDialogVisible.value = true;
}
// 在添加对话框点击“确定”按钮所触发的事件
async function submitAddCareItem() {
  try {
    addDialogData.careItemStatus = addDialogData.careItemStatus == '启用'?true:addDialogData.careItemStatus;
    addDialogData.careItemStatus = addDialogData.careItemStatus == '停用'?false:addDialogData.careItemStatus;
    const response = await axios.post('CareItemController/addCareItem', addDialogData);
    console.log(response);
    if (response) {
      ElMessage.success('添加成功');
      addDialogVisible.value = false;
    } else {
      ElMessage.error('添加失败：未返回有效数据');
    }
  } catch (error) {
    console.error('添加失败：', error);
    ElMessage.error('添加失败：' + (error.message || '未知错误'));
  }
  init();
}



// 修改护理项目
const editDialogVisible = ref(false)
const editDialogData = reactive({     // 修改对话框单向绑定的数据对象
  careLevelId: 0,
  careLevelName: '', // 级别名称
  careLevelStatus: true // 状态
});
// 点击修改按钮所触发的事件
async function editCareItem(row) {
  // 将当前行的数据复制到表单数据中
  editDialogData.careItemId = row.careItemId;
  editDialogData.careItemCode = row.careItemCode;
  editDialogData.careItemName = row.careItemName;
  editDialogData.careItemPrice = row.careItemPrice;
  editDialogData.careItemCycle = row.careItemCycle;
  editDialogData.careItemCount = row.careItemCount;
  editDialogData.careItemDescription = row.careItemDescription;
  editDialogData.careItemStatus = row.careItemStatus === true ?'启用':'停用';
  editDialogVisible.value = true;
}
// 在修改对话框点击“确定”按钮所触发的事件
async function submitEditCareItem() {
  try {
    editDialogData.careItemStatus = editDialogData.careItemStatus == '启用'?true:editDialogData.careItemStatus;
    editDialogData.careItemStatus = editDialogData.careItemStatus == '停用'?false:editDialogData.careItemStatus;
    console.log(editDialogData);
    const response = await axios.post('CareItemController/updateCareItem', editDialogData);

    console.log(response);
    if (response) {
      ElMessage.success('修改成功');
      editDialogVisible.value = false;
    } else {
      ElMessage.error('修改失败：未返回有效数据');
    }
  } catch (error) {
    console.error('修改失败：', error);
    ElMessage.error('修改失败：' + (error.message || '未知错误'));
  }
  init();
}




// 移除护理项目
async function removeCareItem(careItemId) {
  try {
    // 确认是否移除
    await ElMessageBox.confirm('确认删除该护理项目？', '提示', { type: 'warning' });
    // 发送请求到后端
    const url = `CareItemController/deleteCareItem?careItemId=${careItemId}`;
    console.log(careItemId);
    const responseData = await axios.post(url);
    // 检查返回的数据
    if (responseData) {
      // 移除成功
      ElMessage.success('删除成功');
    } else {
      // 移除失败
      ElMessage.error('删除失败：未返回有效数据');
    }
  } catch (error) {
    // 捕获错误
    console.error('删除护理项目时发生错误：', error);
    ElMessage.error('删除失败：' + (error.message || '未知错误'));
  }
  init()
}


// 初始化护理项目列表
const filters = reactive({
  careItemName: '', // 护理项目名称
  careItemStatus: '1', // 护理项目状态，默认显示启用状态
  careItemCode: '', // 护理项目编号
  careItemPrice: '', // 护理项目价格
  careItemCycle: '', // 护理项目周期
  careItemCount: '', // 护理项目数量
  careItemDescription: '' // 护理项目描述
});
// 引入全局注入的 axios 对象
const axios = inject('axios')
let arr = ref([])
const init = async () => {
  let url = `CareItemController/listCareItemByConditions`;
  const params = {
    careItemStatus: filters.careItemStatus,
    careItemName: filters.careItemName,
    careItemCode: filters.careItemCode,
    page: careItemPagination.current, // 添加分页参数 current
    size: careItemPagination.size     // 添加分页参数 size
  };
  try {
    const data = await axios.get(url, { params });
    arr.value = data.records
    careItemPagination.total = data.total
    console.log('chongg', arr.value) // 打印查看数据
  } catch (error) {
    console.log(error)
    ElMessage.error(error.message || '获取数据失败')
    arr.value = []; // 确保在获取数据失败时，arr 为空数组
  }
}
// 调用初始化函数，在页面载入前把数据从后台拉取到前端
onMounted(init)


// 处理筛选信息（重新进行项目列表初始化）
function handleFiltersChange() {
  init()
}

</script>

<style scoped>
.careItem-select {
  width: 150px; /* 设置宽度 */
  margin: 0 auto; /* 水平居中对齐 */
}

.careLevel-select {
  width: 150px; /* 设置宽度 */
  margin: 0 auto; /* 水平居中对齐 */
}
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-form .el-form-item{
  margin-top: 25px;
  margin-bottom: 30px
}
.el-upload__tip{
  line-height: 1;
  color: red;
}

.dialog-section {
  border-bottom: 1px solid #eaeaea;
  padding: 10px 0;
}
.dialog-header {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}
.client-name {
  flex: 1;
}
.client-cover {
  flex: 1;
  text-align: center;
}
.cover-frame {
  display: inline-block;
  border: 1px dashed #ccc;
  padding: 5px;
  width: 150px;
  height: 150px;
}
.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.flex-container {
  display: flex;
  justify-content: space-between;
}
.flex-item {
  flex: 1;
  margin-right: 16px;
}
.flex-item:last-child {
  margin-right: 0;
}
.dialog-footer {
  display: flex;
  justify-content: center; /* 将按钮居中对齐 */
  gap: 16px;  /* 按钮之间的间距 */
}

</style>